import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/base/const_color.dart';
import 'package:flutter_app/common/search_widget.dart';
import 'package:flutter_app/main/first_widget.dart';
import 'package:flutter_app/main/fourth_widget.dart';
import 'package:flutter_app/main/second_widget.dart';
import 'package:flutter_app/main/third_widget.dart';

void main(){
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
    statusBarColor: Colors.transparent, //or set color with: Color(0xFF0000FF)
  ));
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        scaffoldBackgroundColor: backgroundColor,
        brightness: Brightness.dark,
        hoverColor:Colors.black,

        textSelectionColor: Colors.green,
        hintColor: Colors.grey,
        highlightColor: Colors.black45,

      ),
      routes: {
        "search":(context)=>new SearchWidget(),

      },
      home: MainWidget()
    );
  }
}

class MainWidget extends StatefulWidget {
  @override
  _MainWidgetState createState() => _MainWidgetState();
}

class _MainWidgetState extends State<MainWidget>{
  int _positon = 0;
  String title_name = "首页";

  @override
  void initState() {
    super.initState();
  }

  /**
   * 初始化布局
   */

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).padding.top,

          ),
          Container(
            height: 45,
            child: Row(
              mainAxisSize: MainAxisSize.max,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Expanded(
                  child: Container(
                      alignment: Alignment.centerLeft,
                      child: Padding(
                        padding: EdgeInsets.fromLTRB(12, 0, 12, 0),
                        child: Text(title_name,style: TextStyle(fontSize: 16,color: Colors.black,fontWeight: FontWeight.bold,decoration: TextDecoration.none),overflow: TextOverflow.fade,maxLines: 1,),
                      )
                  ),
                ),
                Material(
                  color: Colors.grey[300],
                  child: InkWell(
                    child: AspectRatio(
                      aspectRatio: 1.2,
                      child: Container(
                        child: Icon(Icons.search,color: Colors.black,),
                      ),
                    ),
                    onTap: (){
//                    Navigator.pushNamed(context, "search");
                    },
                  ),
                ),
                Material(
                  color: Colors.grey[300],
                  child: InkWell(
                    child: AspectRatio(
                      aspectRatio: 1.2,
                      child: Container(
                        alignment: Alignment.center,
                        child: Icon(Icons.add_circle_outline,color: Colors.black,),
                      ),
                    ),
                    onTap: (){

                    },
                  ),
                )
              ],
            ),
          ),
          Expanded(
            child: Stack(
              children: <Widget>[
                Offstage(
                  offstage: _positon != 0,
                  child: FirstWidget(),
                ),
                Offstage(
                  offstage: _positon != 1,
                  child: SecondWidget(),
                ),
                Offstage(
                  offstage: _positon != 2,
                  child: ThirdWidget(),
                ),
                Offstage(
                  offstage: _positon != 3,
                  child: FourthWidget(),
                ),
              ],
            ),
          ),
          Container(
            height: 45,
            child: Row(
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                _bottomWidget("images/fate_def.png","images/fate_sel.png","首页",0),
                _bottomWidget("images/activity_def.png","images/activity_sel.png","通讯录",1),
                _bottomWidget("images/message_def.png","images/message_sel.png","发现",2),
                _bottomWidget("images/my_def.png","images/my_sel.png","我的",3),
              ],
            ),
          )
        ],
      ),
    );
  }

  /**
   * 底部栏
   * normalImg: 未选中图片
   * selectImg: 选中图片
   * txt: 文本
   * position: 当前选中位置
   * localPostion：此widget位置
   */
  Widget _bottomWidget(String normalImg,String selectImg,String txt,int position){
    return Expanded(
      child: Material(
        color:backgroundColor,
        child: InkWell(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Image.asset(position == _positon ? selectImg : normalImg,width: 25,height: 25,fit: BoxFit.contain,),
              Container(
                padding: EdgeInsetsDirectional.only(top: 3),
                child: Text(txt,style: TextStyle(color: position == _positon ? Colors.black87: Colors.black45,fontSize: 12,fontWeight: FontWeight.normal,decoration: TextDecoration.none),),
              )
            ],
          ),
          onTap: (){
            if(_positon != position){
              setState(() {
                title_name = txt;
                _positon = position;
              });
            }
          },
        ),
      ),
    );
  }

}





